import React, { useState, useEffect } from 'react';
import {Layout, Card, Upload, Form, Empty } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import CommentSearch from './components/CommentSearch';
import Footers from '@/components/Footer';
import { InboxOutlined } from '@ant-design/icons';
import { connect } from 'umi'
function IndexPage(props:any) {
  const { Header, Footer, Content } = Layout;
  const [pageInfo, setPage] = useState({ page: 1, pageSize: 12 })
  const { setPoster, total, dispatch } = props;
  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };
  useEffect(() => {
    dispatch({
      type: 'poster/INIT',
      pageInfo,
    })
  }, []);
  return (
    <div>
      <Layout>
        <PageHeaderWrapper />
        <Header
          style={{
            background: '#f0f2f5',
            height: '180px',
            padding: '20px 20px 0px 20px',
          }}
        >
          <Card bodyStyle={{ padding: '0px' }}>
            <Form>
              <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                <Upload.Dragger name="files" action="/upload.do">
                  <p className="ant-upload-drag-icon">
                    <InboxOutlined />
                  </p>
                  <p className="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
                  <p className="ant-upload-hint">文件将上传到 OSS, 如未配置请先配置</p>
                </Upload.Dragger>
              </Form.Item>
            </Form>
          </Card>
        </Header>
        <Header
          style={{
            background: '#f0f2f5',
            height: '180px',
            padding: '20px 20px 0px 20px',
          }}
        >
          <Card>
            <CommentSearch></CommentSearch>
          </Card>
        </Header>
        <Content style={{ padding: '0px 20px 20px 20px' }}>
          <Card style={{ height: '200px' }}>
            {
              setPoster&&setPoster.length>0?setPoster.map((item:any,index:number)=>{
                return <p>{item.name}</p>
              }):<Empty />
            }
            
          </Card>
        </Content>
        <Footer>
          <Footers></Footers>
        </Footer>
      </Layout>
    </div>
  );
}
// connect接收两个参数
// 1. 函数 mapStateToProps
const mapStateToProps = (state: any) => {
  const { poster } = state
  return poster
}
export default connect(mapStateToProps)(IndexPage)